<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>影片修改</title>
	<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
</head>
<style>
	/* 设置页面右上角关闭叉叉样式 */
	.close {
		display: inline-block;
		position: absolute;
		right: 20px;
	}
	.close:hover {
		color: red;
	}
	/* 设置表单输入框宽度 */
	.c {
		width: 900px;
	}
</style>
<body>
	<div width="100%" style="margin-top:10px;margin-botton:30px;">
		<label style="font-size:23px">影片修改</label>
		<a href="film_list.html">
			<div class="close"><i class="layui-icon" style="font-size:20px;font-weight:bold;" title="关闭">&#x1006;</i>
			</div>
		</a>
	</div>
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">

	</fieldset>

	<form class="layui-form" id="film-update">
		<div class="layui-form-item">
			<label class="layui-form-label">影片名称</label>
			<div class="layui-input-block">
				<input type="text" id="filmname" required class="layui-input required c"
				v-bind:placeholder="film.filmName" v-bind:value="film.filmName">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">影片类型</label>
			<div class="layui-input-block">
				<input type="text" id="filmtype" required class="layui-input required c"
				v-bind:placeholder="film.filmType" v-bind:value="film.filmType">
			</div>
		</div>



		<div class="layui-form-item">
			<label class="layui-form-label">国家</label>
			<div class="layui-input-block" style="width:900px">
				<select id="country" lay-filter="aihao" required>
					<option v-bind:value="film.filmCountry">{{film.filmCountry}}</option>
					<option value="中国大陆">中国大陆</option>
					<option value="中国香港">中国香港</option>
					<option value="中国台湾">中国台湾</option>
					<option value="美国">美国</option>
					<option value="英国">英国</option>
					<option value="日本">日本</option>
					<option value="韩国">韩国</option>
					<option value="德国">德国</option>
					<option value="法国">法国</option>
					<option value="泰国">泰国</option>
					<option value="加拿大">加拿大</option>
					<option value="俄罗斯">俄罗斯</option>
					<option value="意大利">意大利</option>
					<option value="西班牙">西班牙</option>
					<option value="澳大利亚">澳大利亚</option>
					<option value="印度">印度</option>
				</select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">导演</label>
			<div class="layui-input-block">
				<input type="text" id="director" required class="layui-input required c"
				v-bind:placeholder="film.filmDirector" v-bind:value="film.filmDirector">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">时长（分钟）</label>
			<div class="layui-input-block">
				<input type="text" id="filmlong" required class="layui-input required c"
				v-bind:placeholder="film.filmLong" v-bind:value="film.filmLong">
			</div>
		</div>


		<div class="layui-form-item">
			<label class="layui-form-label">语言</label>
			<div class="layui-input-block" style="width:900px">
				<select id="language" lay-filter="aihao" required>
					<option v-bind:value="film.filmLanguage">{{film.filmLanguage}}</option>
					<option value="普通话">普通话</option>
					<option value="粤语">粤语</option>
					<option value="英语">英语</option>
					<option value="中英">中英</option>
					<option value="俄语">俄语</option>
					<option value="韩语">韩语</option>
					<option value="日语">日语</option>
					<option value="泰语">泰语</option>
					<option value="西班牙语">西班牙语</option>
					<option value="意大利语">意大利语</option>
				</select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">上映时间</label>
			<div class="layui-input-block">
				<input type="text" name="filmdate" id="date" required v-bind:placeholder="film.filmYear"
					v-bind:value="film.filmYear" lay-verify="date" autocomplete="off" class="layui-input c">
			</div>
		</div>



		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">影片简介</label>
			<div class="layui-input-block">
				<textarea v-bind:placeholder="film.filmDesc" class="layui-textarea c" id="desc"
					required>{{film.filmDesc}}</textarea>
			</div>
		</div>

		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">海报</label>
			<div class="layui-input-block">
				<div class="layui-upload">
					<img id="pic" v-bind:src="'../images/'+film.filmPicture" style="width:100px;height:150px" />

					<button type="button" class="layui-btn" id="test1">
						<i class="layui-icon">&#xe67c;</i>浏览图片
					</button>
					<button type="button" class="layui-btn" id="btn_ok">
						<i class="layui-icon">&#xe67c;</i>确定上传
					</button>
					<input type="hidden" name="filmpicture" id="filename" value="${requestScope.f.filmPicture}">
				</div>
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button type="button" class="layui-btn" @click="update" lay-filter="demo1"><i
						class="layui-icon">&#xe621;</i>确认修改</button>
				<button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe9aa;</i>重置</button>
			</div>
		</div>
	</form>

	<script src="../js/jquery-1.12.4.min.js"></script>
	<script src="../js/Vue.js"></script>
	<script src="../layer/layer.js"></script>
	<script src="../layui/layui.js"></script>
	<script src="js/film-update.js"></script>
	<script>
		//日期选择表
		layui.use(['form', 'layedit', 'laydate'], function () {
			var form = layui.form
				, layer = layui.layer
				, layedit = layui.layedit
				, laydate = layui.laydate;

			//日期
			laydate.render({
				elem: '#date',
				trigger: 'click'   //解决闪退问题
			});

		});

		//电影海报的上传
		layui.use(['jquery', 'table', 'layer', 'form', 'upload'], function () {
			//获取各模块的实例
			var $ = layui.jquery;
			var table = layui.table;
			var layer = layui.layer;
			var form = layui.form;
			var upload = layui.upload;

			//上传接口
			var uploadInst = upload.render({
				elem: '#test1',				//绑定浏览文件元素
				url: 'FilmPictureUploadServlet.do',		//实现上传功能的服务器端程序
				accept: 'file',				//设置允许上传的文件类型
				bindAction: '#btn_ok', 		//绑定提交上传的按钮
				exts: 'jpg|png|jpeg',			//设置允许上传的文件后缀
				size: 20000,					//设计允许上传文件的大小，单位：KB
				field: "attach",				//绑定上传控件的字段名，便于服务器获取上传文件
				auto: false,					//设置不自动上传
				done: function (res) {			//上传成功的回调
					//res参数：服务器响应回来的数据，可以封装为responseData对象
					console.info(res);
					//$("#pic").prop("src","${pageContext.request.contextPath}/upload/tx/"+res.data) ;

					//上传成功后，隐藏按钮，防止上传多次
					$("#btn_ok").hide();
					//上传成功后，把隐藏域里面的内容设置为获取的参数值
					$("#filename").val(res.msg);
					layer.msg('上传成功');

					//location.href = "ListAllFilmServlet.do?op=update" ;
				},
				error: function () {			//上传失败的回调
					//请求异常回调
					layer.msg('图片上传失败--');
				},
				choose: function (obj) {		//选择文件后的回调
					obj.preview(function (index, file, result) {
						//console.log(index); 	//得到文件索引
						//console.log(file); 		//得到文件对象
						//console.log(result); 	//得到文件base64编码，比如图片

						//显示图片
						$("#pic").prop("src", result);
					});

					//显示提交按钮
					$("#btn_ok").show();
				}
			});
		});
	</script>
</body>
</html>